<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="$t('使用验证器应用验证身份')"
    width="500px"
    center
    :destroy-on-close="true"
    @close="handelCloseDialog"
    @keydown="handleKeyDown"
  >
    <el-form :model="form" width="100%" label="" ref="dialogFormRef">
      <el-form-item label="">
        <span style="font-size: 15px">
          {{ $t("若继续，请输入您的验证器应用生成的6位验证码") }}
        </span>
        <el-input
          v-model="form.code"
          :placeholder="$t('6位数字验证码')"
          clearable
          style="margin-top: 20px"
        />
        <span
          class="error-message"
          v-if="showErrorMessage"
          style="color: #e54c5f; font-size: 15px"
          >{{ errorMessage }}</span
        >
      </el-form-item>
    </el-form>
    <div class="flex justify-center w-full mt-5">
      <el-button
        type="primary"
        class="w-32"
        :disabled="!form.code"
        @click="checkGoogleAuthCode(form.code)"
        >{{ $t("继续") }}</el-button
      >
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue";
// 获取谷歌验证器密钥googleAuthSecretApi
// 绑定谷歌验证器bindGoogleAuthApi
// 校验google验证器checkGoogleAuthApi
// 打开google验证器选项openGoogleAuthApi
import { checkGoogleAuthApi } from "@/api/gooleSettings/index";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const showErrorMessage = ref(false);
const errorMessage = ref("");

const form = reactive({
  code: "",
});

const dialogFormRef = ref("");
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  isSetGoogle: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["closeDialog", "submitForm", "callApi"]);

const handelCloseDialog = () => {
  showErrorMessage.value = false;
  errorMessage.value = "";
  form.code = "";
  emits("closeDialog");
};
const handleKeyDown = (event) => {
  if (event.code === "Enter") {
    event.preventDefault(); // 阻止默认行为
    checkGoogleAuthCode(form.code);
  }
};

// 检查Google验证码
const checkGoogleAuthCode = (code) => {
  if (code.length !== 6) {
    // 输入的验证码长度不是6位，显示相应的错误消息
    showErrorMessage.value = true;
    errorMessage.value = t("请输入6位验证码");
    return;
  }
  emits("callApi", code, props.isSetGoogle);
  // checkGoogleAuthApi({ code })
  //   .then((response) => {
  //     console.log(response);
  //     showErrorMessage.value = false;
  //     errorMessage.value = "";
  //     form.code = "";
  //     emits("handleGoPath");
  //   })
  //   .catch((error) => {
  //     showErrorMessage.value = true;
  //     errorMessage.value = "发生错误，请重试";
  //   });
};
</script>
<style>
.error-message {
  display: block;
  margin-top: 8px;
}
</style>
